<template>
  <section>
    <banner></banner>
    <div style="height:30px"></div>
    <div class="div_1200">
      <nuxt-link
        class="a_art"
        v-for="(item, index) in proClassList2"
        :key="index"
        :to="'/pro?proClassId='+proClassId+'&proClassId2='+item.id"
        :class="{'sel':item.id==proClassId2}"
      >{{item.name}}</nuxt-link>
    </div>
    <div style="height:30px;"></div>
    <div class="div_1200 div_con">
      <template>
        <el-tabs v-model="proClassId3" @tab-click="handleClick">
          <el-tab-pane
            :label="item.name"
            :name="item.id"
            v-for="(item, index) in proClassList3"
            :key="index"
          >
            <div class="div_list">
              <el-card v-for="(item, index) in proList" :key="index" class="box-card">
                <nuxt-link :to="'/pro/info?proId='+item._id">
                  <img class="img_pro" :src="item.pic">
                  {{item.name}}
                </nuxt-link>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
      <pager :total="total" :page="page" :pageSize="limit"></pager>
    </div>
  </section>
</template>
<script>
import banner from "../../components/banner.vue";
import pager from "../../components/page.vue";
export default {
  data() {
    return {
      proClassList2: [],
      activeName: "all",
      something: "",
      page: 1,
      limit: 30,
      total: 0
    };
  },
  methods: {
    handleClick2(tab, event) {
      console.log(tab, event);
    },
    handleClick(tab, event) {
      var q = this.g.qs();
      q.proClassId3 = this.proClassId3;
      q.page = 1;
      var qsStr = this.g.qsStr(q);
      console.log(qsStr);
      this.$router.push("pro?" + qsStr);
    }
  },
  mounted() {},
  props: {},
  components: {
    banner,
    pager
  },
  watchQuery: ["proClassId", "proClassId2", "proClassId3"],
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error
  }) {
    return await new Promise((resolve, reject) => {
      store.commit("ajax", {
        class: "pro",
        para: "getMerProClass",
        j: {
          merId: store.state.merId
        },
        fun: res => {
          if (!res.data.err) {
            var proClassList2 = [];
            var proClassList3 = [];
            var proClassId = query.proClassId;
            var proClassId2 = query.proClassId2;
            var proClassId3 = query.proClassId3;
            if (res.data.info) {
              for (let index = 0; index < res.data.info.list.length; index++) {
                const item = res.data.info.list[index];

                if (item.id == query.proClassId) {
                  console.log(query.proClassId);
                  proClassList2 = item.cld;
                }
              }
            }

            if (!proClassId2 && proClassList2.length > 0) {
              proClassId2 = proClassList2[0].id;
            }

            for (let index = 0; index < proClassList2.length; index++) {
              const item = proClassList2[index];
              if (item.id == proClassId2) {
                proClassList3 = item.cld;
              }
            }
            proClassList3.unshift({
              name: "全部",
              id: "all"
            });
            if (!proClassId3 && proClassList3.length > 0) {
              proClassId3 = proClassList3[0].id;
            }

            resolve(
              new Promise((resolve, reject) => {
                var classIdArray = [];
                classIdArray.push(proClassId);
                if (proClassId2 && proClassId2 != "all") {
                  classIdArray.push(proClassId2);
                }
                if (proClassId3 && proClassId3 != "all") {
                  classIdArray.push(proClassId3);
                }
                var currentPage = parseInt(query.page);
                if (!currentPage) {
                  currentPage = 1;
                }
                store.commit("ajax", {
                  class: "pro",
                  para: "getProList",
                  j: {
                    data: {
                      "mer._id": store.state.merId,

                      "class.id": {
                        $all: classIdArray
                      }
                    },

                    page: currentPage
                  },
                  fun: resPro => {
                    if (!resPro.data.err) {
                      resolve({
                        proClassList2: proClassList2,
                        proClassList3: proClassList3,
                        proClassId: proClassId,
                        proClassId2: proClassId2,
                        proClassId3: proClassId3,
                        total: resPro.data.total,
                        proList: resPro.data.list
                      });
                    } else {
                      console.log(resPro.data.err);
                    }
                  }
                });
              })
            );
          } else {
            this.$message({
              message: res.data.err,
              type: "warning" //success/warning/info/error
            });
          }
        }
      });
    });
  }
};
</script>
<style scoped>
.div_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.div_list .box-card {
  width: calc(25% - 12px);
  height: auto;
  background: #fff;
  margin-top: 10px;
  margin-right: 10px;
  text-align: left;
}

.img_pro {
  width: 100%;
}

.div_con {
  min-height: 520px;
  height: auto;
}

.div_list a {
  color: #111;
}

@media screen and (max-width: 900px) {
  .div_list .box-card {
    width: calc(33% - 12px);
  }
}

@media screen and (max-width: 700px) {
  .div_list .box-card {
    width: calc(50% - 12px);
  }
}
</style>
